<template>
    <Header></Header>
    <Drawer></Drawer>
    <el-breadcrumb separator="/" style="font-size: 20px;color: #FF5C82;">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/GravidaList/'+ groupId }">档案管理</el-breadcrumb-item>
      <el-breadcrumb-item>膳食分析</el-breadcrumb-item>
    </el-breadcrumb>
  
    <div class='pageListBotton'>
      <el-button :icon="Expand" style="color: white;background: #FF5C82" round @click="pageList">
        档案列表
      </el-button>
      <span class="onBtnRight" @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
    </div>
  
    <GravidaLeft></GravidaLeft>
    <el-card class="right-box-card">
      <div style="font-weight:bold;">
        推荐能量：{{ energy_1 }} ~ {{ energy_2 }}
      </div>
      <div style="width:100%;margin:auto;margin-top:20px;display: flex;">
        <div style="width: 20%;">
            <el-input v-model="input_min" placeholder="请输入最小能量值" />
        </div>
        <div style="width: 20%;margin-left: 2%;">
             <el-input v-model="input_max" placeholder="请输入最大能量值" />
        </div>
        <div style="margin-left:2%;background-color:#FF5C82;width: 70px;height: 40px;text-align: center;line-height: 40px;border-radius: 5px;" @click="querys" >
            <a href="javascript:void(0)" style="color:#fff;text-decoration:none;font-size:14px;">查询</a>
        </div>
        <div style="margin-left:2%;background-color:#FF5C82;width: 70px;height: 40px;text-align: center;line-height: 40px;border-radius: 5px;" @click="prints" >
            <a href="javascript:void(0)" style="color:#fff;text-decoration:none;font-size:14px;">打印</a>
        </div>
      </div>

      <div v-if="cookbook" style="margin-top: 20px;">
        <div class="plates" >
        <div class="time-type time-left-color">早餐</div>
        <div class="der">
          <div style="margin-left:6%;padding-top: 6%;">
            <span class="plates-top-img" v-for="breakfast in Opinion_1" :key="breakfast"><img :src=" 'http://'+baseUrl+'/' + breakfast.meal_image" alt="" style="width:100px; height:100px;"></span>
            <span class="plates-top-img" v-for="earlier in Opinion_2" :key="earlier"><img :src="'http://'+baseUrl+'/' + earlier.meal_image" alt="" style="width:100px; height:100px;"></span>
          </div>
        </div>
        <div class="platesFoods">
          <div>早餐7:00: <span v-for="breakfast in Opinion_1" :key="breakfast"><o class="foodsNames">{{  breakfast.food_name }}</o> 重量:{{ breakfast.weight }}g; </span></div>
          <div>早点10:00: <span v-for="earlier in Opinion_2" :key="earlier"><o class="foodsNames">{{  earlier.food_name }}</o> 重量:{{ earlier.weight }}g; </span></div>
        </div>
      </div>

      <div class="plates">
        <div class="time-type time-common-color">午餐</div>
        <div class="der">
          <div style="margin-left:6%;padding-top: 6%;">
            <span class="plates-top-img" v-for="lunch in Opinion_3" :key="lunch"><img :src=" 'http://'+baseUrl+'/' + lunch.meal_image" alt="" style="width:100px; height:100px;"></span>
            <span class="plates-top-img" v-for="noon in Opinion_4" :key="noon"><img :src="'http://'+baseUrl+'/' + noon.meal_image" alt="" style="width:100px; height:100px;"></span>
          </div>
        </div>

        <div class="platesFoods">
          <div>午餐12:00: <span v-for="lunch in Opinion_3" :key="lunch"><o class="foodsNames">{{  lunch.food_name }}</o> 重量:{{ lunch.weight }}g; </span></div>
          <div>午点15:00: <span v-for="noon in Opinion_4" :key="noon"><o class="foodsNames">{{  noon.food_name }}</o> 重量:{{ noon.weight }}g; </span></div>
        </div>
      </div>

      <div class="plates">
        <div class="time-type time-right-color">晚餐</div>
        <div class="der">
          <div style="margin-left:6%;padding-top: 6%;">
            <span class="plates-top-img" v-for="dinner in Opinion_5" :key="dinner"><img :src=" 'http://'+baseUrl+'/' + dinner.meal_image" alt="" style="width:100px; height:100px;"></span>
            <span class="plates-top-img" v-for="late in Opinion_6" :key="late"><img :src="'http://'+baseUrl+'/' + late.meal_image" alt="" style="width:100px; height:100px;"></span>
          </div>
        </div>

        <div class="platesFoods">
          <div>晚餐18:00: <span v-for="dinner in Opinion_5" :key="dinner"><o class="foodsNames">{{  dinner.food_name }}</o> 重量:{{ dinner.weight }}g; </span></div>
          <div>晚点21:00: <span v-for="late in Opinion_6" :key="late"><o class="foodsNames">{{  late.food_name }}</o> 重量:{{ late.weight }}g; </span></div>
        </div>
      </div>
      </div>
     
    
    </el-card>
  
  
  
  
  </template>
  
  
  <script setup>
  import { Edit, CirclePlus, Search, Expand,  } from '@element-plus/icons-vue'
  import {defineComponent, onMounted, ref, watch} from 'vue';
  import {ElMessage} from "element-plus";
  import * as api from "../api/loginHttp";
  import Header from './common/Header.vue';
  import Drawer from './common/Drawer.vue';
  import GravidaLeft from './common/GravidaLeft.vue';
  import Gravidadietary from './common/Gravidadietary.vue';
  import http, {baseUrl} from "../utils/http";
  import {useRoute, useRouter} from "vue-router"
  import {energy, GravidaEnergy} from "../api/loginHttp";
  
  const router = useRouter()
  const route = useRoute()
  const labName = ref()
  const groupId = ref()
  const reportId = ref()
  const list = ref({})
  const id = ref()
  const input_min=ref()
  const input_max=ref()
  const imgUrl = ref()
  
  const energy_1=ref()
  const energy_2=ref()
  const Opinion_1=ref()
  const Opinion_2=ref()
  const Opinion_3=ref()
  const Opinion_4=ref()
  const Opinion_5=ref()
  const Opinion_6=ref()
  const cookbook=ref(false)



  const letEnergy = ref({'energy': 0, 'start':0, 'end':0})
  const protein = ref({'energy': 0, 'start':0, 'end':0})
  const fat = ref({'energy': 0, 'start':0, 'end':0})
  const carbohydrate= ref({'energy': 0, 'start':0, 'end':0})
  const calcium = ref({'energy': 0, 'start':0, 'end':0})
  const sodium = ref({'energy': 0, 'start':0, 'end':0})
  const magnesium = ref({'energy': 0, 'start':0, 'end':0})
  const iron = ref({'energy': 0, 'start':0, 'end':0})
  const zinc = ref({'energy': 0, 'start':0, 'end':0})
  const selenium = ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_a =ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_e = ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_b1 = ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_b2 = ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_c =ref({'energy': 0, 'start':0, 'end':0})
  const diet_analysis = ref({})
  
  const onHome = async () => {
    await router.push({'path': '/Home'})
  }
  const kcalType = ref(2)



    //查询
    const querys = async ()  => {
    // api.energy( {
    //   'groupId': groupId.value,
    //   'id': id.value,
    //   'reportId': reportId.value,
    // }).then((res)=>{
    //     Opinion_1.value=res.data.data.diet_analysis[0].早餐
    //     Opinion_2.value=res.data.data.diet_analysis[0].早点
    //     Opinion_3.value=res.data.data.diet_analysis[0].午餐
    //     Opinion_4.value=res.data.data.diet_analysis[0].午点
    //     Opinion_5.value=res.data.data.diet_analysis[0].晚餐
    //     Opinion_6.value=res.data.data.diet_analysis[0].晚点
    // })
    if(input_min.value && input_max.value ){
          cookbook.value=true;
          let params = {
          'id': reportId.value,
          'user_id':id.value,
          'diet_energy': energy._value,
          'diet':list._rawValue,
          'start_package':input_min.value,
          'end_package':input_max.value,
        };
        const datas = await api.onediet(params);
        if(datas.data.code==1){
            Opinion_1.value=datas.data.data.diet_analysis[0].早餐
            Opinion_2.value=datas.data.data.diet_analysis[0].早点
            Opinion_3.value=datas.data.data.diet_analysis[0].午餐
            Opinion_4.value=datas.data.data.diet_analysis[0].午点
            Opinion_5.value=datas.data.data.diet_analysis[0].晚餐
            Opinion_6.value=datas.data.data.diet_analysis[0].晚点
        }else{
          
        }
      }else{
        ElMessage.error('请输入能量范围')
      }
  }
  //打印
  const prints = async () => {
    if(Opinion_1.value){
        const { href } = await router.resolve({
        path:  "/GravidaCookbook/"+groupId.value+"/"+id.value+"/"+reportId.value
      });
      window.open(href, "_blank");
    }else{
      ElMessage.error('请先获取一天食物推荐')
    }
  }
  
  const fetchData = async () => {
    if (route.params.groupId) {
      console.log(route.params.groupId,route.params.id,route.params.reportId)
      groupId.value = route.params.groupId
      id.value = route.params.id
      reportId.value = route.params.reportId
      if (groupId.value == 3) {
        labName.value = '婴幼儿营养测评'
      } else if (groupId.value == 5) {
        labName.value = '孕产妇营养测评'
      } else if (groupId.value == 6) {
        labName.value = '成年人营养测评'
      } else if (groupId.value == 7) {
        labName.value = '慢性病营养测评'
      } else if (groupId.value == 8) {
        labName.value = '团体营养测评'
      }
  
      imgUrl.value = "http://"+baseUrl+'/';


      const res = await api.getonediet({id: route.params.reportId});
      if(res.data.data!=null){
          cookbook.value=true;
          Opinion_1.value = res.data.data.早餐;
          Opinion_2.value = res.data.data.早点;
          Opinion_3.value = res.data.data.午餐;
          Opinion_4.value = res.data.data.午点;
          Opinion_5.value = res.data.data.晚餐;
          Opinion_6.value = res.data.data.晚点;
        }
        
      

  
        let params = {
          'groupId': groupId.value,
          'id': id.value,
          'reportId': reportId.value,
        }
        const data = await api.energy(params);
        energy_1.value=data.data.data.packAge[0].start_package
        energy_2.value=data.data.data.packAge[0].end_package
        let ws = new WebSocket('ws://'+baseUrl+':1234');
      ws.onopen = function(){
        let uid = window.localStorage.getItem("MemberId");
        ws.send(uid);
      };
      ws.onmessage = function(e){
        loadings.value = true;
        energy.value = 0;
        let WebList = JSON.parse(e.data);
        for (let i = 0; i < WebList.list.length; i++) {
          WebList.list[i].single = {
            energy: WebList.list[i].energy,
            weight: WebList.list[i].weight,
            protein: WebList.list[i].protein,
            fat: WebList.list[i].fat,
            carbohydrate: WebList.list[i].carbohydrate,
            calcium: WebList.list[i].calcium,
            sodium: WebList.list[i].sodium,
            magnesium: WebList.list[i].magnesium,
            iron: WebList.list[i].iron,
            zinc: WebList.list[i].zinc,
            selenium: WebList.list[i].selenium,
            vitamin_a: WebList.list[i].vitamin_a,
            vitamin_e: WebList.list[i].vitamin_e,
            vitamin_b1: WebList.list[i].vitamin_b1,
            vitamin_b2: WebList.list[i].vitamin_b2,
            vitamin_c: WebList.list[i].vitamin_c,
            checkList:[]
  
          }
          energy.value = energy.value + Number(WebList.list[i].energy);
          energys.value=( energy.value).toFixed(2);
        
        }
  
        list.value = WebList.list;
        list.value.map((item,index)=>{
          console.log(item)
        })
  
        setTimeout(() => {
          loadings.value = false
        },1000);
      };
  
    } else {
      ElMessage.error('栏目编号不得为空')
      await router.push({'path': '/Home'})
    }
  }
  // const pageList = async () => {
  //   await router.push({'path': '/GravidaList/' + groupId.value})
  // }
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style scoped>
  .right-box-card {
    margin-left: 2%;
    margin-top: 1%;
    position: static;
    top: calc(260px);
    width: 60%;
    float: left;
    margin-bottom: 2%;
    /*min-height: 650px;*/
  }
  
  .images-wrapper {
    width: 100%;
    position: relative;
    height: 173px;
    font-weight: bold;
  }
  .foodsNames {
    color:red;
  }
  
  .images-content {
    position: absolute;
    z-index: 1;
    line-height: 54px;
    top: calc(55% - 54px);
    overflow: hidden;
    margin-left: 55%;
    font-size: 18px;
  
  }
  
  .service_plate {
    background: url('../assets/img/evaluaction_service_plate.png') center no-repeat;
  }
  
  .dietOn {
    height: 500px;
  }
  
  .everyRed {
    color:red;
  }
  
  .everyOrange {
    color:orange;
  }
  
  .everyBlack {
    color:#333333;
  }
  
  .time-botton {
    background-color: #FF5C82;
    width: 108px;
    height: 41px;
    color: #fff;
    font-size: 16px;
    border-radius: 100px;
    line-height: 41px;
    margin: 40px 0 0 40px;
    text-align: center;
  }
  
  .time-type {
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    background: #85CE61;
    border-radius: 50%;
    opacity: 1;
    color: #fff;
    box-shadow: 5px 5px 2px #888888;
    margin: 20px 0 20px 40%;
  }
  
  .der{
    width: 354px;
    height: 241px;
    background: url("../assets/img/evaluaction_service_plate.png") 100% 100%;
  }
  
  .platesFoods{
    margin-top: 5px;
    margin-left: 8px;
  
    color: #333333;
    font-size: 16px;
  }
  .platesFoods div {
    padding-bottom: 18px;
  
  }
  .platesFoods span{
    color: #666666;
  }
  
  .plates {
    width: 33%;
    float: left;
  }
  
  .plates .plates-top-img {
    float: left;
    margin-left: 1%;
  }
  
  .time-left-color {
    background: #85CE61;
  }
  
  .time-common-color {
    background: #E8B973;
  }
  
  .time-right-color {
    background: #6EA9E0;
  }
  
  .images-lab {
    position: absolute;
    z-index: 1;
    line-height: 54px;
    top: calc(85% - 54px);
    overflow: hidden;
    margin-left: 55%;
    font-size: 50px;
  }
  
  #params {
    margin-top: 3%;
    font-size: 22px;
    font-weight: bold;
  }
  
  .shu {
    width: 5px;
    height: 30px;
    background: #FF5C82;
    opacity: 1;
    border-radius: 100px;
    float: left;
    margin-right: 2%;
    margin-left: 3%;
  }
  
  #params span {
    font-size: 15px;
    color: #666;
    margin-left: 2%;
  }
  
  li {
    list-style-type: none;
  }
  
  #params ul {
    margin-left: 3%;
  }
  
  .topColor {
    color: #E8B973;
  }
  
  .topBgColor {
    border: 1px solid #E8B973;
    background-color: #E8B973;
  }
  
  .normalColor {
    color: #FF5C82;
  }
  
  .normalBgColor {
    border: 1px solid #FF5C82;
    background-color: #FF5C82;
  }
  
  .bottomColor {
    color: #6CA9E3;
  }
  
  .bottomBgColor {
    border: 1px solid #6CA9E3;
    background-color: #6CA9E3;
  }
  
  .images-lab span {
    font-size: 18px;
  }
  
  .images-right {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 15%;
    height: 20%;
    line-height: 34px;
    top: calc(95% - 54px);
    overflow: hidden;
    margin-left: 75%;
    font-size: 18px;
    border-radius: 30px;
    color: #fff;
    text-align: center;
  }
  
  
  #enerty .bt {
    background: #F7F7F7;
    color: #fff;
  }
  
  #enerty .bt span {
    width: 25%;
    float: left;
    text-align: center;
    color: #999999;
    line-height: 30px;
  }
  
  #enerty ul li {
    width: 48%;
    display: inline-block;
    margin: 0;
  }
  
  #enerty .element span {
    width: 25%;
    float: left;
    text-align: center;
    line-height: 50px;
  }
  
  </style>
  